<template>
  <view class="drop-menu" v-if="tabsList">
    <!-- <view class="drop-header">
      <view
        class="header-item"
        @tap="headItemClick(item)"
        :style="{ width: `${700 / tabsList.length}rpx` }"
        v-for="item in tabsList"
        :key="item.id"
      >
        <text>{{ item.title }}</text>
        <view class="head-icon" v-if="item.type == 'pull'">
          <text
            class="iconfont icon-jiantou-shang"
            v-if="selectItem && item.id == selectItem.id && isShowMenu"
          ></text>
          <text class="iconfont icon-jiantou-xia" v-else></text>
        </view>
      </view>
    </view>
    <view
      class="drop-menu-bg"
      v-if="isShowMenu && selectItem && selectItem.type == 'pull'"
      @tap="isShowMenu = false"
    >
      <view class="drop-menu-content" @tap.prevent>
        <u-cell-group>
          <u-cell
            :title="el.name"
            v-for="el in selectItem.menuList"
            :key="el.id"
            @tap="menuClick(el)"
          >
            <template #value>
              <text
                class="iconfont icon-xuanzhong"
                v-if="el.id == selectItem.selectMenuItemId"
              ></text>
            </template>
          </u-cell>
        </u-cell-group>
      </view>
    </view> -->
  </view>
</template>

<script setup lang="ts">
// import { PropType, ref } from "vue";
// import { DRopMenuHeadType, MenuList } from "@/model/globalModel";
// defineProps({
//   tabsList: {
//     type: Array as PropType<DRopMenuHeadType[]>,
//     required: true
//   }
// });
// const emit = defineEmits(["selectMenuData"]);
// const selectItem = ref<DRopMenuHeadType>({} as DRopMenuHeadType);
// const isShowMenu = ref(false);

// //头部的点击事件
// function headItemClick(item: DRopMenuHeadType) {
//   if (item.type == "click") {
//     isShowMenu.value = false;
//     selectItem.value = item;
//     emit("selectMenuData", selectItem, item);
//   } else if (item.type == "pull") {
//     if (!selectItem.value || selectItem.value.id != item.id) {
//       //下拉框
//       isShowMenu.value = true;
//       selectItem.value = item;
//     } else {
//       isShowMenu.value = !isShowMenu.value;
//     }
//   }
// }

// // 下拉菜单的点击事件
// function menuClick(el: MenuList) {
//   selectItem.value.selectMenuItemId = el.id;
//   isShowMenu.value = !isShowMenu.value;
//   selectItem.value.title = el.name;
//   emit("selectMenuData", selectItem, el);
// }
</script>

<style lang="scss" scoped>
// .drop-menu {
//   width: 100%;
//   height: 100%;

//   .drop-header {
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     background-color: white;
//     height: 88rpx;
//     line-height: 88rpx;
//     .header-item {
//       display: flex;
//       justify-content: center;
//       .head-icon {
//         padding-left: 10rpx;
//       }
//     }
//   }
//   .drop-menu-bg {
//     height: calc(100% - 88rpx);
//     background-color: rgba(0, 0, 0, 0.6);
//   }
//   .drop-menu-content {
//     background-color: white;
//   }
//   .icon-xuanzhong {
//     font-size: 40rpx;
//     color: $u-primary;
//   }
// }
</style>